React Batching: กลยุทธ์การปรับปรุง State Update เพื่อประสิทธิภาพสูงสุดของแอปพลิเคชัน

React ซึ่งเป็นไลบรารี JavaScript ที่ทรงพลังสำหรับการสร้างส่วนติดต่อผู้ใช้ (user interfaces) มุ่งมั่นที่จะให้มีประสิทธิภาพสูงสุด หนึ่งในกลไกสำคัญที่ใช้คือ batching ซึ่งช่วยเพิ่มประสิทธิภาพในการประมวลผลการอัปเดต state การทำความเข้าใจ React batching เป็นสิ่งสำคัญอย่างยิ่งสำหรับการสร้างแอปพลิเคชันที่มีประสิทธิภาพและตอบสนองได้ดี โดยเฉพาะอย่างยิ่งเมื่อแอปพลิเคชันมีความซับซ้อนมากขึ้น คู่มือฉบับสมบูรณ์นี้จะเจาะลึกถึงความซับซ้อนของ React batching สำรวจประโยชน์ กลยุทธ์ต่างๆ และเทคนิคขั้นสูงเพื่อเพิ่มประสิทธิผลให้สูงสุด

React Batching คืออะไร?

React batching คือกระบวนการรวบรวมการอัปเดต state หลายๆ ครั้งให้เป็นการ re-render เพียงครั้งเดียว แทนที่ React จะ re-render คอมโพเนนต์ทุกครั้งที่มีการอัปเดต state มันจะรอจนกว่าการอัปเดตทั้งหมดจะเสร็จสิ้น แล้วจึงทำการเรนเดอร์เพียงครั้งเดียว ซึ่งช่วยลดจำนวนการ re-render ลงอย่างมาก ส่งผลให้ประสิทธิภาพดีขึ้นอย่างเห็นได้ชัด

ลองพิจารณาสถานการณ์ที่คุณต้องการอัปเดตตัวแปร state หลายตัวภายใน event handler เดียวกัน:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setCountA(countA + 1);
    setCountB(countB + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

หากไม่มี batching โค้ดนี้จะทำให้เกิดการ re-render สองครั้ง: ครั้งแรกสำหรับ setCountA และอีกครั้งสำหรับ setCountB อย่างไรก็ตาม React batching จะรวบรวมการอัปเดตเหล่านี้อย่างชาญฉลาดให้เป็นการ re-render เพียงครั้งเดียว ส่งผลให้ประสิทธิภาพดีขึ้น ซึ่งจะสังเกตได้ชัดเจนเป็นพิเศษเมื่อต้องจัดการกับคอมโพเนนต์ที่ซับซ้อนมากขึ้นและการเปลี่ยนแปลง state บ่อยครั้ง

ประโยชน์ของ Batching

ประโยชน์หลักของ React batching คือการปรับปรุงประสิทธิภาพ โดยการลดจำนวนการ re-render จะช่วยลดปริมาณงานที่เบราว์เซอร์ต้องทำ ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่ราบรื่นและตอบสนองได้ดียิ่งขึ้น โดยเฉพาะอย่างยิ่ง batching มีข้อดีดังต่อไปนี้:

• ลดการ re-render: ประโยชน์ที่สำคัญที่สุดคือการลดจำนวนครั้งของการ re-render ซึ่งส่งผลโดยตรงต่อการใช้ CPU ที่น้อยลงและเวลาในการเรนเดอร์ที่เร็วขึ้น
• การตอบสนองที่ดีขึ้น: การลดการ re-render ช่วยให้แอปพลิเคชันตอบสนองต่อการโต้ตอบของผู้ใช้ได้ดีขึ้น ผู้ใช้จะรู้สึกถึงความหน่วงที่น้อยลงและอินเทอร์เฟซที่ลื่นไหลมากขึ้น
• ประสิทธิภาพที่เพิ่มขึ้น: Batching ช่วยเพิ่มประสิทธิภาพโดยรวมของแอปพลิเคชัน นำไปสู่ประสบการณ์ผู้ใช้ที่ดีขึ้น โดยเฉพาะบนอุปกรณ์ที่มีทรัพยากรจำกัด
• ลดการใช้พลังงาน: การ re-render ที่น้อยลงยังหมายถึงการใช้พลังงานที่ลดลง ซึ่งเป็นข้อพิจารณาที่สำคัญสำหรับอุปกรณ์พกพาและแล็ปท็อป

Automatic Batching ใน React 18 และเวอร์ชันที่ใหม่กว่า

ก่อนหน้า React 18, batching ถูกจำกัดอยู่แค่การอัปเดต state ภายใน React event handlers เท่านั้น ซึ่งหมายความว่าการอัปเดต state นอก event handlers เช่น ภายใน setTimeout, promises หรือ native event handlers จะไม่ถูกจัดกลุ่ม (batched) แต่ React 18 ได้นำเสนอ automatic batching ซึ่งขยายขอบเขตของ batching ให้ครอบคลุมการอัปเดต state เกือบทั้งหมด ไม่ว่าจะมาจากที่ใดก็ตาม การปรับปรุงนี้ช่วยให้การเพิ่มประสิทธิภาพทำได้ง่ายขึ้นอย่างมาก และลดความจำเป็นในการแทรกแซงด้วยตนเอง

ด้วย automatic batching โค้ดต่อไปนี้จะถูกจัดกลุ่มใน React 18:

            
function MyComponent() {
  const [countA, setCountA] = React.useState(0);
  const [countB, setCountB] = React.useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCountA(countA + 1);
      setCountB(countB + 1);
    }, 0);
  };

  return (
    <button onClick={handleClick}>
      Increment Both
    </button>
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ แม้ว่าการอัปเดต state จะอยู่ภายใน setTimeout callback แต่ React 18 ก็ยังคงรวบรวมการอัปเดตเหล่านี้เป็นการ re-render เพียงครั้งเดียว พฤติกรรมอัตโนมัตินี้ช่วยให้การเพิ่มประสิทธิภาพทำได้ง่ายขึ้น และรับประกันว่าการทำ batching จะสอดคล้องกันในรูปแบบโค้ดที่แตกต่างกัน

กรณีที่ Batching ไม่เกิดขึ้น (และวิธีจัดการ)

แม้ว่า React จะมีความสามารถในการทำ automatic batching แต่ก็ยังมีสถานการณ์ที่ batching อาจไม่เกิดขึ้นตามที่คาดไว้ การทำความเข้าใจสถานการณ์เหล่านี้และรู้วิธีจัดการเป็นสิ่งสำคัญในการรักษาประสิทธิภาพสูงสุด

1. การอัปเดตภายนอก Render Tree ของ React

หากการอัปเดต state เกิดขึ้นนอก render tree ของ React (เช่น ภายในไลบรารีที่จัดการ DOM โดยตรง) การทำ batching จะไม่เกิดขึ้นโดยอัตโนมัติ ในกรณีเหล่านี้ คุณอาจต้องสั่งให้ re-render ด้วยตนเอง หรือใช้กลไก reconciliation ของ React เพื่อให้แน่ใจว่าข้อมูลสอดคล้องกัน

2. โค้ดหรือไลบรารีรุ่นเก่า

โค้ดเบสเก่าๆ หรือไลบรารีของบุคคลที่สามอาจใช้รูปแบบที่ขัดขวางกลไก batching ของ React ตัวอย่างเช่น ไลบรารีอาจสั่งให้ re-render โดยตรงหรือใช้ API ที่ล้าสมัย ในกรณีเช่นนี้ คุณอาจต้องปรับปรุงโค้ด (refactor) หรือหาไลบรารีทางเลือกที่เข้ากันได้กับพฤติกรรม batching ของ React

3. การอัปเดตเร่งด่วนที่ต้องการการเรนเดอร์ทันที

ในบางกรณีที่เกิดขึ้นไม่บ่อยนัก คุณอาจต้องการบังคับให้ re-render ทันทีสำหรับการอัปเดต state ที่เฉพาะเจาะจง ซึ่งอาจจำเป็นเมื่อการอัปเดตนั้นสำคัญต่อประสบการณ์ของผู้ใช้และไม่สามารถรอได้ React มี API flushSync สำหรับสถานการณ์เหล่านี้ (จะกล่าวถึงรายละเอียดด้านล่าง)

กลยุทธ์ในการปรับปรุง State Updates

แม้ว่า React batching จะช่วยปรับปรุงประสิทธิภาพโดยอัตโนมัติ แต่คุณยังสามารถปรับปรุงการอัปเดต state เพิ่มเติมเพื่อให้ได้ผลลัพธ์ที่ดียิ่งขึ้น นี่คือกลยุทธ์ที่มีประสิทธิภาพบางส่วน:

1. จัดกลุ่ม State Updates ที่เกี่ยวข้องกัน

เมื่อใดก็ตามที่เป็นไปได้ ให้จัดกลุ่มการอัปเดต state ที่เกี่ยวข้องกันไว้ในการอัปเดตเพียงครั้งเดียว ซึ่งจะช่วยลดจำนวนการ re-render และปรับปรุงประสิทธิภาพ ตัวอย่างเช่น แทนที่จะอัปเดตตัวแปร state หลายตัวแยกกัน ลองพิจารณาใช้ตัวแปร state เดียวที่เก็บออบเจ็กต์ที่มีค่าที่เกี่ยวข้องทั้งหมด

            
function MyComponent() {
  const [data, setData] = React.useState({
    name: '',
    email: '',
    age: 0,
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setData({ ...data, [name]: value });
  };

  return (
    <form>
      <input type="text" name="name" value={data.name} onChange={handleChange} />
      <input type="email" name="email" value={data.email} onChange={handleChange} />
      <input type="number" name="age" value={data.age} onChange={handleChange} />
    </form>
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ การเปลี่ยนแปลงของ input ในฟอร์มทั้งหมดจะถูกจัดการโดยฟังก์ชัน handleChange เดียว ซึ่งจะอัปเดตตัวแปร state data สิ่งนี้ช่วยให้แน่ใจว่าการอัปเดต state ที่เกี่ยวข้องทั้งหมดจะถูกจัดกลุ่มเป็นการ re-render เพียงครั้งเดียว

2. ใช้ Functional Updates

เมื่ออัปเดต state โดยอิงจากค่าก่อนหน้า ให้ใช้ functional updates ซึ่งจะส่งค่า state ก่อนหน้าเป็นอาร์กิวเมนต์ไปยังฟังก์ชันอัปเดต ทำให้แน่ใจว่าคุณทำงานกับค่าที่ถูกต้องเสมอ แม้ในสถานการณ์ที่เป็นแบบอะซิงโครนัส

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const handleClick = () => {
    setCount((prevCount) => prevCount + 1);
  };

  return (
    <button onClick={handleClick}>
      Increment
    </button>
  );
}

            

              
                Copy
              
            
          

การใช้ functional update setCount((prevCount) => prevCount + 1) รับประกันว่าการอัปเดตจะอิงจากค่าก่อนหน้าที่ถูกต้อง แม้ว่าการอัปเดตหลายครั้งจะถูกจัดกลุ่มเข้าด้วยกัน

3. ใช้ประโยชน์จาก useCallback และ useMemo

useCallback และ useMemo เป็น hooks ที่จำเป็นสำหรับการเพิ่มประสิทธิภาพของ React พวกมันช่วยให้คุณสามารถ memoize ฟังก์ชันและค่าต่างๆ เพื่อป้องกันการ re-render ที่ไม่จำเป็นของ child components ซึ่งมีความสำคัญอย่างยิ่งเมื่อส่ง props ไปยัง child components ที่ต้องพึ่งพาค่าเหล่านี้

            
function MyComponent() {
  const [count, setCount] = React.useState(0);

  const increment = React.useCallback(() => {
    setCount((prevCount) => prevCount + 1);
  }, []);

  return (
    <ChildComponent increment={increment} />
  );
}

function ChildComponent({ increment }) {
  React.useEffect(() => {
    console.log('ChildComponent rendered');
  });
  return (<button onClick={increment}>Increment</button>);
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ useCallback จะ memoize ฟังก์ชัน increment เพื่อให้แน่ใจว่ามันจะเปลี่ยนแปลงก็ต่อเมื่อ dependencies ของมันเปลี่ยนแปลงเท่านั้น (ในกรณีนี้คือไม่มี) ซึ่งจะช่วยป้องกันไม่ให้ ChildComponent re-render โดยไม่จำเป็นเมื่อ state count เปลี่ยนแปลง

4. Debouncing และ Throttling

Debouncing และ throttling เป็นเทคนิคในการจำกัดอัตราการเรียกใช้งานฟังก์ชัน มีประโยชน์อย่างยิ่งในการจัดการกับ event ที่ก่อให้เกิดการอัปเดตบ่อยครั้ง เช่น scroll events หรือการเปลี่ยนแปลงของ input โดย Debouncing จะทำให้แน่ใจว่าฟังก์ชันจะถูกเรียกใช้งานหลังจากไม่มีการใช้งานเป็นระยะเวลาหนึ่ง ในขณะที่ throttling จะทำให้แน่ใจว่าฟังก์ชันจะถูกเรียกใช้งานไม่เกินหนึ่งครั้งในช่วงเวลาที่กำหนด

            
import { debounce } from 'lodash';

function MyComponent() {
  const [searchTerm, setSearchTerm] = React.useState('');

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchTerm(value);
    debouncedSearch(value);
  };

  const search = (term) => {
    console.log('Searching for:', term);
    // Perform search logic here
  };

  const debouncedSearch = React.useMemo(() => debounce(search, 300), []);

  return (
    <input type="text" onChange={handleInputChange} />
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ ฟังก์ชัน debounce จาก Lodash ถูกใช้เพื่อ debounce ฟังก์ชัน search ซึ่งทำให้แน่ใจว่าฟังก์ชัน search จะถูกเรียกใช้งานหลังจากที่ผู้ใช้หยุดพิมพ์เป็นเวลา 300 มิลลิวินาที ซึ่งช่วยป้องกันการเรียก API ที่ไม่จำเป็นและปรับปรุงประสิทธิภาพ

เทคนิคขั้นสูง: requestAnimationFrame และ flushSync

สำหรับสถานการณ์ที่ซับซ้อนยิ่งขึ้น React มี API ที่ทรงพลังสองตัวคือ: requestAnimationFrame และ flushSync ซึ่งช่วยให้คุณสามารถปรับแต่งจังหวะเวลาของการอัปเดต state และควบคุมเวลาที่การ re-render จะเกิดขึ้น

1. requestAnimationFrame

requestAnimationFrame เป็น API ของเบราว์เซอร์ที่กำหนดเวลาให้ฟังก์ชันถูกเรียกใช้งานก่อนการ repaint ครั้งถัดไป มักใช้เพื่อทำการเคลื่อนไหว (animations) และการอัปเดตภาพอื่นๆ ให้ราบรื่นและมีประสิทธิภาพ ใน React คุณสามารถใช้ requestAnimationFrame เพื่อจัดกลุ่มการอัปเดต state และให้แน่ใจว่ามันซิงค์กับวงจรการเรนเดอร์ของเบราว์เซอร์

            
function MyComponent() {
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    const animate = () => {
      requestAnimationFrame(() => {
        setPosition((prevPosition) => prevPosition + 1);
        animate();
      });
    };

    animate();
  }, []);

  return (
    <div style={{ transform: `translateX(${position}px)` }}>
      Moving Element
    </div>
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ requestAnimationFrame ถูกใช้เพื่ออัปเดตตัวแปร state position อย่างต่อเนื่องเพื่อสร้างการเคลื่อนไหวที่ราบรื่น การใช้ requestAnimationFrame ทำให้การอัปเดตซิงค์กับวงจรการเรนเดอร์ของเบราว์เซอร์ ป้องกันการกระตุกของภาพเคลื่อนไหวและรับประกันประสิทธิภาพสูงสุด

2. flushSync

flushSync เป็น API ของ React ที่บังคับให้มีการอัปเดต DOM แบบ synchronous ทันที โดยทั่วไปจะใช้ในกรณีที่เกิดขึ้นไม่บ่อยนักที่คุณต้องการให้แน่ใจว่าการอัปเดต state จะสะท้อนใน UI ทันที เช่น เมื่อโต้ตอบกับไลบรารีภายนอกหรือเมื่อทำการอัปเดต UI ที่สำคัญ ควรใช้อย่างระมัดระวังเนื่องจากอาจลบล้างประโยชน์ด้านประสิทธิภาพของ batching ได้

            
import { flushSync } from 'react-dom';

function MyComponent() {
  const [text, setText] = React.useState('');

  const handleChange = (e) => {
    const value = e.target.value;
    flushSync(() => {
      setText(value);
    });
    // Perform other synchronous operations that rely on the updated text
    console.log('Text updated synchronously:', value);
  };

  return (
    <input type="text" onChange={handleChange} />
  );
}

            

              
                Copy
              
            
          

ในตัวอย่างนี้ flushSync ถูกใช้เพื่ออัปเดตตัวแปร state text ทันทีเมื่อ input มีการเปลี่ยนแปลง สิ่งนี้ช่วยให้แน่ใจว่าการดำเนินการแบบ synchronous ใดๆ ที่ตามมาซึ่งต้องใช้ค่า text ที่อัปเดตแล้ว จะสามารถเข้าถึงค่าที่ถูกต้องได้ สิ่งสำคัญคือต้องใช้ flushSync อย่างรอบคอบ เนื่องจากมันสามารถรบกวนกลไก batching ของ React และอาจนำไปสู่ปัญหาด้านประสิทธิภาพหากใช้มากเกินไป

ตัวอย่างจากโลกจริง: แพลตฟอร์มอีคอมเมิร์ซระดับโลกและแดชบอร์ดการเงิน

เพื่อแสดงให้เห็นถึงความสำคัญของ React batching และกลยุทธ์การเพิ่มประสิทธิภาพ เรามาพิจารณาตัวอย่างจากโลกจริงสองตัวอย่าง:

1. แพลตฟอร์มอีคอมเมิร์ซระดับโลก

แพลตฟอร์มอีคอมเมิร์ซระดับโลกต้องจัดการกับการโต้ตอบของผู้ใช้จำนวนมหาศาล รวมถึงการเลือกดูสินค้า การเพิ่มสินค้าลงในตะกร้า และการชำระเงิน หากไม่มีการปรับปรุงประสิทธิภาพที่เหมาะสม การอัปเดต state ที่เกี่ยวข้องกับยอดรวมในตะกร้า ความพร้อมของสินค้า และค่าจัดส่งอาจทำให้เกิดการ re-render หลายครั้ง ส่งผลให้ผู้ใช้ได้รับประสบการณ์ที่เชื่องช้า โดยเฉพาะผู้ใช้ที่มีการเชื่อมต่ออินเทอร์เน็ตที่ช้าในตลาดเกิดใหม่ การนำ React batching และเทคนิคต่างๆ เช่น debouncing สำหรับการค้นหา และ throttling สำหรับการอัปเดตยอดรวมในตะกร้ามาใช้ จะช่วยให้แพลตฟอร์มสามารถปรับปรุงประสิทธิภาพและการตอบสนองได้อย่างมาก ทำให้ผู้ใช้ทั่วโลกได้รับประสบการณ์การช็อปปิ้งที่ราบรื่น

2. แดชบอร์ดการเงิน

แดชบอร์ดการเงินจะแสดงข้อมูลตลาดแบบเรียลไทม์ ผลการดำเนินงานของพอร์ตโฟลิโอ และประวัติการทำธุรกรรม แดชบอร์ดจำเป็นต้องอัปเดตบ่อยครั้งเพื่อสะท้อนสภาวะตลาดล่าสุด อย่างไรก็ตาม การ re-render ที่มากเกินไปอาจทำให้อินเทอร์เฟซกระตุกและไม่ตอบสนอง การใช้เทคนิคต่างๆ เช่น useMemo เพื่อ memoize การคำนวณที่ซับซ้อน และ requestAnimationFrame เพื่อซิงค์การอัปเดตกับวงจรการเรนเดอร์ของเบราว์เซอร์ จะช่วยให้แดชบอร์ดสามารถรักษาประสบการณ์ผู้ใช้ที่ราบรื่นและลื่นไหลได้ แม้จะมีการอัปเดตข้อมูลความถี่สูง นอกจากนี้ Server-Sent Events (SSE) ซึ่งมักใช้สำหรับการสตรีมข้อมูลทางการเงิน จะได้รับประโยชน์อย่างมากจากความสามารถ automatic batching ของ React 18 การอัปเดตที่ได้รับผ่าน SSE จะถูกจัดกลุ่มโดยอัตโนมัติ ช่วยป้องกันการ re-render ที่ไม่จำเป็น

สรุป

React batching เป็นเทคนิคการปรับปรุงประสิทธิภาพพื้นฐานที่สามารถเพิ่มประสิทธิภาพของแอปพลิเคชันของคุณได้อย่างมาก ด้วยการทำความเข้าใจวิธีการทำงานของ batching และการนำกลยุทธ์การปรับปรุงประสิทธิภาพที่มีประสิทธิภาพมาใช้ คุณจะสามารถสร้างส่วนติดต่อผู้ใช้ที่มีประสิทธิภาพและตอบสนองได้ดี ซึ่งมอบประสบการณ์ที่ยอดเยี่ยมแก่ผู้ใช้ ไม่ว่าแอปพลิเคชันของคุณจะซับซ้อนเพียงใดหรือผู้ใช้ของคุณจะอยู่ที่ใด ตั้งแต่ automatic batching ใน React 18 ไปจนถึงเทคนิคขั้นสูงอย่าง requestAnimationFrame และ flushSync, React มีชุดเครื่องมือที่หลากหลายสำหรับการปรับแต่งการอัปเดต state และเพิ่มประสิทธิภาพสูงสุด การตรวจสอบและปรับปรุงแอปพลิเคชัน React ของคุณอย่างต่อเนื่องจะช่วยให้แน่ใจว่าแอปพลิเคชันยังคงรวดเร็ว ตอบสนองได้ดี และน่าใช้งานสำหรับผู้ใช้ทั่วโลก